<!DOCTYPE html>
<html> 
	<head> 
		<title>My first Three.js app</title> 
		<style>
			canvas { 
				width: 100%;
				height: 100% 
			}
		</style> 
	</head> 
	<body> 
		<script src="js/libs/jquery-1.6.4.js"></script>
		<script src="js/libs/three.js"></script>
		<script src="js/loaders/OBJLoader.js"></script>
		
		
		<script> 
			var container, stats;
			var camera, scene, renderer;
			var mouseX = 0, mouseY = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			var isUserInteracting = false;
			
			
			var fov = 70,
			texture_placeholder,
			isUserInteracting = false,
			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
			lon = 0, onMouseDownLon = 0,
			lat = 0, onMouseDownLat = 0,
			phi = 0, theta = 0;
			

			var content;
			var mouse = new THREE.Vector2();

			init();
			animate();


			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.target = new THREE.Vector3(0, 0, 0);
				
				camera.position.z = 100;

				// scene

				scene = new THREE.Scene();

				var ambient = new THREE.AmbientLight( 0x101030 );
				scene.add( ambient );

				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
				directionalLight.position.set( 0, 0, 1 ).normalize();
				scene.add( directionalLight );

				// texture

				var texture = new THREE.Texture();

				var loader = new THREE.ImageLoader();
				loader.addEventListener( 'load', function ( event ) {
					texture.image = event.content;
					texture.needsUpdate = true;
				});
				loader.load( 'assets/2.png' );

				// model

				var loader = new THREE.OBJLoader();
				loader.addEventListener( 'load', function ( event ) {

					var object = event.content;

					object.traverse( function ( child ) {

						if ( child instanceof THREE.Mesh ) {

							child.material.map = texture;

						}

					} );

					object.position.y = - 80;
					scene.add( object );
					content = object;
				});

				loader.load( 'assets/2.obj');

				//

				renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
				document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

//				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
			
			
			function onDocumentMouseDown( event ) {

				event.preventDefault();

				isUserInteracting = true;

				onPointerDownPointerX = event.clientX;
				onPointerDownPointerY = event.clientY;

				onPointerDownLon = lon;
				onPointerDownLat = lat;
				
				
				
				
				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
				var projector = new THREE.Projector();
				projector.unprojectVector( vector, camera );

				var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

				var intersects = raycaster.intersectObjects( content );

				if ( intersects.length > 0 ) {
					alert("here");
					var intersects = raycaster.intersectObject( plane );

				}
				
			}

			function onDocumentMouseMove( event ) {
				if ( isUserInteracting ) {
					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
				}
				event.preventDefault();

			}

			function onDocumentMouseUp( event ) {

				isUserInteracting = false;

			}

			function onDocumentMouseWheel( event ) {

				// WebKit

				if ( event.wheelDeltaY ) {

					fov -= event.wheelDeltaY * 0.05;

				// Opera / Explorer 9

				} else if ( event.wheelDelta ) {

					fov -= event.wheelDelta * 0.05;

				// Firefox

				} else if ( event.detail ) {

					fov += event.detail * 1.0;

				}

				camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
				render();

			}

			function animate() {
				requestAnimationFrame( animate );
				render();
			}

			function render() {
				lat = Math.max( - 85, Math.min( 85, lat ) );
				phi = THREE.Math.degToRad( 90 - lat );
				theta = THREE.Math.degToRad( lon );

				camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
				camera.target.y = 500 * Math.cos( phi );
				camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

				camera.lookAt( camera.target );

				renderer.render( scene, camera );
				
			}
			
		</script> 
	</body> 
</html>



    
